<template>
    <div id="hotCenter_hfcl_index_" class="container-fluid padding">
        <form  action="">
            <!--操作-->
            <fieldset class="layui-elem-field site-demo-button" id="operation">
                <legend>操作</legend>
                <div style="padding: 0px 10px 10px" action="">
                    <el-button type="success" class="is-round fa fa-search" :disabled="!operation.cx" @click="cx()">查询</el-button>
                    <el-button type="warning" class="is-round fa fa-hand-spock-o" :disabled="!operation.pjfp" @click="pjfp()">平均分配</el-button>
                    <el-button type="primary" class="is-round fa fa-hand-pointer-o" :disabled="!operation.zdfp" @click="zdfp()">指定分配</el-button>
                </div>
            </fieldset>
            <!--查询的字段与条件-->
            <div id="details">
                <el-form :model="params" :inline="true" ref="params" label-width="100px" class="padding">
                    <el-form-item label="是否分配" prop="sffp">
                        <div style="width: 300px;">
                            <el-radio class="radio" v-model="params.sffp" label="1">待分配</el-radio>
                            <el-radio class="radio" v-model="params.sffp" label="2">已分配</el-radio>
                            <el-radio class="radio" v-model="params.sffp" label="0">全部</el-radio>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否分配" prop="sfcj" >
                        <div style="width: 300px;">
                            <el-radio class="radio" v-model="params.sfcj" label="1">未成交</el-radio>
                            <el-radio class="radio" v-model="params.sfcj" label="2">已成交</el-radio>
                            <el-radio class="radio" v-model="params.sfcj" label="0">全部</el-radio>
                        </div>
                    </el-form-item>
                    <br/>
                    <el-form-item label="时间选择" prop="sjlx">
                        <el-select v-model="params.sjlx" style="width: 300px;">
                            <el-option value="" label=""></el-option>
                            <el-option value="0" label="建档时间">建档时间</el-option>
                            <el-option value="1" label="修改分配时间">修改分配时间</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间区间" prop="sjqj">
                        <el-date-picker style="width: 710px;"
                                        v-model="params.sjqj"
                                        type="datetimerange"
                                        placeholder="选择时间范围"
                                        value-format="timestamp"
                                        align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="处理类型" prop="cllx">
                        <el-select v-model="params.cllx" style="width: 300px;">
                            <el-option value="" label=""></el-option>
                            <el-option v-for="item in datas['处理类型']['children']" v-bind:key="item.id" v-bind:value="item.text" >{{item.text}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户质量" prop="khzl">
                        <el-select v-model="params.khzl" style="width: 300px;">
                            <el-option value="" label=""></el-option>
                            <el-option v-for="item in datas['客户质量']['children']" v-bind:key="item.id" v-bind:value="item.text" >{{item.text}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户来源" prop="khly">
                        <el-select v-model="params.khly" style="width: 300px;">
                            <el-option value="" label=""></el-option>
                            <el-option v-for="item in datas['客户来源']['children']" v-bind:key="item.id" v-bind:value="item.text" >{{item.text}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户需求" prop="khxq">
                        <el-select v-model="params.khxq" style="width: 300px;">
                            <el-option value="" label=""></el-option>
                            <el-option v-for="item in datas['客户需求']['children']" v-bind:key="item.id" v-bind:value="item.text" >{{item.text}}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="来电号码" prop="ldhm">
                        <el-input v-model="params.ldhm" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="质询产品" prop="zxcp">
                        <el-input v-model="params.zxcp" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="归属员工号" prop="yggh">
                        <el-input v-model="params.yggh" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="客户名称" prop="khmc">
                        <el-input v-model="params.khmc" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button @click="$refs['params'].resetFields()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </form>
        <div>
            <div class="el-col-14">
                <v-khfp ref="khfp" v-bind:params="params" v-bind:cx_="cx_" v-bind:getSeleced_="getSeleced_khfp_" v-bind:refresh_="refresh_khfp_" style="padding-bottom: 70px"/>
            </div>
            <div class="el-col-9 el-col-offset-1">
                <v-dfpyg ref="dfpyg" v-bind:params="params" v-bind:cx_="cx_dfpyg_" v-bind:getSeleced_="getSeleced_dfpyg_" style="padding-bottom: 70px"/>
            </div>
        </div>
    </div>
</template>
<script>
    import khfp from "./khfp.vue";
    import dfpyg from "./dfpyg.vue";
    export default {
        name: "khfp",
        components:{
            'v-khfp':khfp,
            'v-dfpyg':dfpyg
        },
        data() {
            return {
                cx_:false,//查询操作
                cx_dfpyg_:false,//查询待分配员工
                pjfp_:false,//平均分配客户给员工
                zdfp_:false,//指定分配客户给员工
                getSeleced_khfp_:false,//拿到客户分配选中的选项
                getSeleced_dfpyg_:false,//拿到待分配客户选中的选项
                refresh_khfp_:false,//刷新客户分配列表
                operation: {//操作,控制按钮的显示与可以操作
                    cx: true,//查询
                    pjfp: true,//平均分配
                    zdfp: true,//指定分配
                    gb: true,//关闭
                },
                datas: {//字典查找
                    '处理类型': {children: {}},
                    '客户质量': {children: {}},
                    '客户需求': {children: {}},
                    '客户来源': {children: {}},
                },
                params:{
                    id:"",
                    ldhm:"",//来电号码
                    sffp:"0",//是否分配
                    sfcj:"0",//是否成交
                    other:"",
                    zxcp:"",
                    khxq:"",
                    khly:"",
                    cllx:"",
                    sjxz:"",
                    khmc:"",
                    yggh:"",
                    khzl:"",
                    sjqj:"",
                    keyup:true,//确定键按下了
                },
            }
        },
        beforeCreate:function () {
            layui.use('table')
            this.$nextTick(function () {
                //查找字典数据，然后填充到数据框里面
                this.$post('basic-information-system-dict/special-list',{CrmSystemDictSearch: {code_type_name: Object.keys(this.datas)}},this)
                    .then((response) => {
                        if (response.data.res == 1) {//成功
                            this.datas = response.data.data;
                        }else{//失败
                            this.$message({message:"查询失败！"+response.data.data[0],type:"success"})
                        }
                    }).catch((response) => {
                    consoleLog(response)
                });
            });
        },
        methods:{
            cx:function () {//查询
                this.cx_ = !this.cx_;
                this.cx_dfpyg_ = !this.cx_dfpyg_;
            },
            pjfp:function () {//平均分配
                this.getSeleced_khfp_ = !this.getSeleced_khfp_;//拿到 客户分配 选中的数据
                this.getSeleced_dfpyg_ = !this.getSeleced_dfpyg_;//拿到 待分配/已分配员工 选中的数据
                setTimeout(()=>{//表示所有数据更新完成后执行
                    let khfp = this.$refs['khfp'].selectedData;
                    let dfpyg =  this.$refs['dfpyg'].selectedData;
                    if (khfp.length==0){
                        layer.msg("请选择“客户分配”选项！")
                    }else if (dfpyg.length==0){
                        layer.msg("请选择“待分配/已分配员工”选项！")
                    }else{
                        //分配指定客户
                        this.$post('crm-call-back/pjfp',{khfp:khfp,dfpyg:dfpyg})
                            .then((response) => {
                                if (response.data.res == 1) {
                                    this.$message({message:'分配成功！',type:'success'})
                                    this.refresh_khfp_ = !this.refresh_khfp_;
                                }else{//失败
                                    this.$message({message:'分配失败！',type:'error'})
                                }
                            }).catch((response) => {
                            consoleLog(response)
                        });
                    }
                })
            },
            zdfp:function () {//指定分配
                this.getSeleced_khfp_ = !this.getSeleced_khfp_;//拿到 客户分配 选中的数据
                this.getSeleced_dfpyg_ = !this.getSeleced_dfpyg_;//拿到 待分配/已分配员工 选中的数据
                setTimeout(()=>{//表示所有数据更新完成后执行
                    let khfp = this.$refs['khfp'].selectedData;
                    let dfpyg =  this.$refs['dfpyg'].selectedData;
                    if (khfp.length==0){
                        layer.msg("请选择“客户分配”选项！")
                    }else if (dfpyg.length==0){
                        layer.msg("请选择“待分配/已分配员工”选项！")
                    }else if (dfpyg.length>1){
                        layer.msg("指定分配只能选中一个员工！")
                    }else{
                        //分配指定客户
                        this.$post('crm-call-back/zdfp',{khfp:khfp,dfpyg:dfpyg})
                            .then((response) => {
                                if (response.data.res == 1) {
                                    this.$message({message:'分配成功！',type:'success'})
                                    this.refresh_khfp_ = !this.refresh_khfp_;
                                }else{//失败
                                    this.$message({message:'分配失败！',type:'error'})
                                }
                            }).catch((response) => {
                            consoleLog(response)
                        });
                    }
                })
            },
        },
    }
</script>